<!-- 危化品车进出记录 -->
<template>
  <div class="dy-panel">
    <div class="dy-panel-main" style="width: 90vh">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
       <div class="dy-panel-content">
        <contentTitle :title="'同一业态分区对比'"></contentTitle>
        <div class="layChart" ref="ydcldbRef"></div>
      </div>

      <div class="layer-bottom">
        <div class="pd_abItems-contain">
          <!-- <div class="pd_abItems-main">
            <div v-for="(item,index) in abItems" :class="{'pd_abItem-item':true,'selected':item.clazz === 'selected'}" @click="abItemsClick(item)">{{item.title}}</div>
          </div> -->
          <!-- <div class="block_select_contain">
            <el-cascader :options="selectOptions" :show-all-levels="false" placeholder="请选择服务区"
                         @change="serverHandleChange" v-model="curServer" filterable clearable></el-cascader>
          </div> -->
          <div class="block_select_contain">
            <el-cascader :options="modetypeOptions" :show-all-levels="false" placeholder="选择业态"
                         @change="modetypeHandleChange"></el-cascader>
          </div>

          <div class="block_select_contain">
            <el-date-picker style="width: 15vh;"
                v-model="selectXzyf"
                type="month"
                placeholder="选择月份">
            </el-date-picker>
          </div>
          <!-- <div class="block_select_contain">
            <el-date-picker style="width: 15vh;"
                v-model="selectDbyf"
                type="month"
                placeholder="对比月份">
            </el-date-picker>
          </div> -->
          <div class="pd-abItem-search" style="position: relative">
            <button class="pd-abItem-search-btn" @click="search">查询</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, getCurrentInstance, onMounted, ref} from "vue";
import ContentTitle from "../contentTitle.vue";
import {drawLine} from "../../../util/chartUtil.js";
import {ajaxRequest} from "../../../api/code.js";
const chart = getCurrentInstance().proxy.$echarts

const emit = defineEmits(['closeChild']);
const closeCurrent = function (){
  emit('closeChild')
}

const selectXzyf = ref()
const selectDbyf = ref()
////0=零售(超市) 1=餐饮 2=汽修 3=油站 4=客房 5=充电 6=物业 8=加气 9=其它
const modetypeOptions = ref([
    { value: '3', label: '油站' }
  , { value: '8', label: '加气' }
  , { value: '5', label: '充电' }
  , { value: '0', label: '商超' }
  , { value: '1', label: '餐饮' }
  , { value: '4', label: '客房' }
  , { value: '6', label: '物业商户' }
])
const curServer = ref(""),curModetype = ref(""),curSecYear = ref("");

//设置服务区下拉框值
const selectOptions = ref([{
  id: 24193,
  value: '河北高速燕赵驿行集团有限公司',
  label: '河北高速燕赵驿行集团有限公司',
  children: [{
    id: 349,
    value: '滦州服务区',
    label: '滦州服务区'
  }, {
    id: 0,
    value: '丰润停车区',
    label: '丰润停车区'
  }]
}])

const serverHandleChange = (selectItem) => {
  curServer.value = selectItem

}

const modetypeHandleChange = function (selectItem){
  console.log(selectItem);
  curModetype.value = selectItem
}

const secondYearChange = function (selectItem){
  console.log(selectItem);
  curSecYear.value = selectItem
}

const areacode = ref(null)
const abItems = ref([{title:'综合',clazz:'selected'},{title:'东(南)',clazz:''},{title:'西(北)',clazz:''}])
const abItemsClick = function (item){
  abItems.value.forEach((res,i)=>{
    res.clazz = res.title === item.title?'selected':"";
  })
  if(item.title === '综合'){
    areacode.value = null
  }
  else if(item.title === '东(南)'){
    areacode.value = "01"
  }
  else if(item.title === '西(北)'){
    areacode.value = "02"
  }
}

const search = function (){
  // console.log(curServer);
  // console.log(curModetype);
  // console.log(curSecYear);
  console.log(selectXzyf);
  console.log(selectDbyf);

  refreshData()
}

// const ydcldb_legend = ref([parseInt(curModetype.value[0])+`月`, parseInt(curSecYear.value[0])+`月`]);
const ydcldb_legend = ref([`东(南)`, `西(北)`]);
const ydcldb_x = ref([])
const ydcldb_y_1 = ref([])
const ydcldb_y_2 = ref([])
for (let i = 1;i<=31;i++){
  ydcldb_x.value.push(i+'日');
  // ydcldb_y_1.value.push("0")
  // ydcldb_y_2.value.push("0")
}




const ydcldbRef = ref();
const ydcldbOpt = ref({
  color: ['#0CDA4E', '#9014FE'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ydcldb_legend,
    right: '3%',
    top: '8%',
    textStyle:{
      color: '#FFFFFF'
    },
    icon:'rect',
    itemWidth: 18,
    itemHeight: 6
  },
  grid: {
    top: '35%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ydcldb_x.value,
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      axisTick:{
        show: false
      },
      axisLabel: {
        interval:1,
        rotate: 35,
        textStyle: {
          color: 'white',
          fontSize: 10
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: "单位：元",
      nameTextStyle: {
        color: "#FFF",
        nameLocation: "end",
        padding:[0,0,0,15]
      },
      axisLabel: {
        textStyle: {
          color: 'white'
        }
      },
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(127, 127, 127, 1)',
          type: 'dashed',
        }
      },
    }
  ],
  series: [
    {
      name: ydcldb_legend.value[0],
      type: 'bar',
      smooth: true,
      lineStyle: {
        width: 2
      },
      showSymbol: true,
      emphasis: {
        focus: 'series'
      },
      data: ydcldb_y_1.value
    },
    {
      name: ydcldb_legend.value[1],
      type: 'bar',
      smooth: true,
      lineStyle: {
        width: 2
      },
      showSymbol: true,
      emphasis: {
        focus: 'series'
      },
      data: ydcldb_y_2.value
    }
  ]
});

let ydcldbChart
onMounted(() => {
  ydcldbChart = drawLine(ydcldbRef.value,ydcldbOpt.value);
  // getFwqxx()
})

async function refreshData() {
  //选择时间，格式化
  const yyyy = selectXzyf.value.getFullYear();
  const mm = String(selectXzyf.value.getMonth() + 1).padStart(2, '0'); // 月份需要加1，并且补零
  const queryDate = `${yyyy}-${mm}`;

  const params = {
    xzyf : queryDate,
    compid: curServer.value[1],
    modetype: curModetype.value[0],
    areacode:areacode.value
  }

  //后期修改的需求，数据分两次取吧
  ydcldb_y_1.value = []
  ydcldb_y_2.value = []

  const res = await ajaxRequest('post', 'getTyytfqxsdbZhkbfwq', params)
  if (res.data && res.data.a) {
    res.data.a.forEach((item,index)=>{
      ydcldb_y_1.value[parseInt(item.rq)-1] = item.cnt
    })
  }
  if (res.data && res.data.b) {
    res.data.b.forEach((item,index)=>{
      ydcldb_y_2.value[parseInt(item.rq)-1] = item.cnt
    })
  }

  ydcldbOpt.value.series[0].name = ydcldb_legend.value[0]
  ydcldbOpt.value.series[1].name = ydcldb_legend.value[1]
  ydcldbOpt.value.series[0].data = ydcldb_y_1.value
  ydcldbOpt.value.series[1].data = ydcldb_y_2.value
  ydcldbChart.setOption(ydcldbOpt.value)
}

/**
 * 获取服务区档案信息
 */
async function getFwqxx() {
  selectOptions.value[0].children = []
  const result = await ajaxRequest('post', 'getFwqxx', {})
  if (result.data && result.data.length>0) {
    result.data.forEach((item,index)=>{
      selectOptions.value[0].children.push({id:item.id,value:item.id,label:item.compname})
    })
  }
}
</script>

<style scoped>
.dy-panel-main{
  padding:2.5vh;
}

.layer-bottom{
  padding-left: 0vh;
  padding-top: 2vh;
  padding-bottom: 1vh;
  border-top: 2px solid #1D4F59;
}

:deep(.el-input__wrapper){
  background-color: transparent !important;
  color: #FFFFFF !important;
  height: 3vh;
  flex-grow: 0.5 !important;
  width: 15vh;
  margin-right: 2vh;
}
:deep(.custom-date-picker){
  width: 22vh !important; /* 确保您的样式被应用 */
}
:deep(.el-date-editor .el-range-input){
  color: #FFFFFF !important;
}
:deep(.el-date-editor .el-range-separator){
  color: #FFFFFF !important;
}

</style>
